import React, { useState, useEffect } from 'react';
import styles from './index.module.scss';

import { Button, Table, Pagination } from '@alifd/next';

// 获取api
import { getDeviceRoutes } from '../../services/deviceInfo';

const PAGE_SIZE = 10;

// table的列配置
const tableConfig = [
  {
    title: 'Destination',
    dataIndex: 'destination',
    sortable: true
  },
  {
    title: 'Gateway',
    dataIndex: 'gateway',
    sortable: true
  },
  {
    title: 'Mask',
    dataIndex: 'mask',
    sortable: true
  },
  {
    title: 'Flags',
    dataIndex: 'flags',
    sortable: true
  },
  {
    title: 'Metric',
    dataIndex: 'metric',
    sortable: true
  },
  {
    title: 'Interface',
    dataIndex: 'interface',
    sortable: true
  }
];

const RoutesTab = (props) => {
    let [ dataSource, onDataSource ] = useState([]),
        [currentPage, onCurrentPage] = useState(1),
        onDevice = props.onDevice;

    useEffect(()=>{
      props.id && getDeviceRoutes(props.id).then(res=>{
        console.log(res)
        res.code == 200 && onDataSource(
            res.msg.osRoutes
        )
      });
    }, []);

    // 分页
    let d = dataSource.slice((currentPage-1)*PAGE_SIZE,currentPage*PAGE_SIZE);

    const onPageChange = currentPage => {
      onCurrentPage(currentPage)
    }

    return (
        <>
        <div className={styles['routes-table']}>
            <Table
                type="primary"
                dataSource={d}
            >
            {
                tableConfig.map((item,i) => {
                return (
                    <Table.Column key={i} title={item.title} dataIndex={item.dataIndex} sortable={item.sortable} />
                )
                })
            }
            </Table>
        </div>
        <div className={styles['routes-pagination']}>
            <Pagination 
              onChange={onPageChange} 
              total={dataSource.length}
              pageSize={PAGE_SIZE}
              pageShowCount={5}
            />
        </div>
      </>
    )
};

export default RoutesTab;